<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="mall/header::head-fragment('Magic_Coffee咖啡店-个人中心','order/order-list')">
</head>
<body>
<header th:replace="mall/header::header-fragment"></header>
<nav th:replace="mall/header::header-search-fragment"></nav>
<div class="crumb">
    <div class="w">
        <div class="crumb-con">
            <a href="./index.html" class="link">Mall</a>
            <span>></span>
            <span class="link-text">我的订单</span>
        </div>
    </div>
</div>
<div class="page-wrap w">
    <!--左边导航栏-->
    <div th:replace="mall/nav-side::nav-side-fragment"></div>
    <div class="content with-nav">
        <div class="panel" >
            <div class="panel-title">我的订单</div>
            <div class="panel-body">
                <div class="order-list-con">
                    <table class="order-list-table header">
                        <tr>
                            <th class="cell cell-img">&nbsp;</th>
                            <th class="cell cell-info">商品数量</th>
                            <th class="cell cell-price">单价</th>
                            <th class="cell cell-count">数量</th>
                            <th class="cell cell-total">小计</th>
                        </tr>
                    </table>
                    <th:block th:each="orderList : ${orderList}">
                    <table class="order-list-table order-item">
                        <tr>
                            <td colspan="5" class="order-info">
                                <span class="order-text">
                                    <span>订单号：</span>
                                    <a th:href="@{'./order-detail.html?orderNumber=' + ${orderList.orderNo}}" class="link order-num">[[ ${orderList.orderNo} ]]</a>
                                </span>
                                                    <span class="order-text">[[ ${orderList.createTime} ]]</span>
                                                    <span class="order-text">收件人：[[ ${orderList.shippingVO.receiverName} ]]</span>
                                                    <span class="order-text">订单状态：[[ ${orderList.statusDesc} ]]</span>
                                                    <span class="order-text">
                                订单总价：</span>
                                                    <span class="order-total">￥[[ ${orderList.payment} ]]</span>
                                                    <a th:href="@{'./order-detail.html?orderNumber=' + ${orderList.orderNo}}" class="link order-detail" target="_blank">查看详情></a>
                                                </td>
                        </tr>
                        <th:block th:each="orderItemList : ${orderList.orderItemVoList}">
                        <tr>
                            <td class="cell cell-img">
                                <a th:href="@{'./detail.html?productId=' + ${orderItemList.productId}}" class="link" target="_blank">
                                    <img th:src="@{${orderList.imageHost} + ${orderItemList.productImage}}" th:alt="${orderItemList.productName}" class="p-img">
                                </a>
                            </td>
                            <td class="cell cell-info">
                                <a th:href="@{'./detail.html?productId=' + ${orderItemList.productId}}" class="link" target="_blank">
                                    [[ ${orderItemList.productName} ]]
                                </a>
                            </td>
                            <td class="cell cell-price">￥[[ ${orderItemList.currentUnitPrice} ]]</td>
                            <td class="cell cell-count">[[ ${orderItemList.quantity} ]]</td>
                            <td class="cell cell-total">￥[[ ${orderItemList.totalPrice} ]]</td>
                        </tr>
                        </th:block>
                    </table>
                    </th:block>
                </div>
                <!--<div class="pagination">
                </div>-->
                <div class="pages">
                    <div class="page_wrap">
                    <th:block th:if="${null != pageInfo and !#lists.isEmpty(pageInfo.list)}">
                        <span class="page_span1">
                             <a th:href="@{${pageInfo.pageNum==1}?'##':'/order-list?pageNum=' + ${pageInfo.pageNum-1}}">
                                  <div class="disabled-event" th:classappend="${pageInfo.pageNum==1} ? 'disabled' : ''">
                                                < 上一页
                                  </div>
                             </a>

                            <th:block th:if="${pageInfo.pageNum-2 >=1}"><a
                                    th:href="@{'/order-list?pageNum=' + ${pageInfo.pageNum-2}}"
                                    th:text="${pageInfo.pageNum -2}">1</a></th:block>
                            <th:block th:if="${pageInfo.pageNum-1 >=1}"><a
                                    th:href="@{'/order-list?pageNum=' + ${pageInfo.pageNum-1}}"
                                    th:text="${pageInfo.pageNum -1}">1</a></th:block>
                            <a href="##" class="active" th:text="${pageInfo.pageNum}">1</a>
                            <th:block th:if="${pageInfo.pageNum+1<=pageInfo.pages}"><a
                                    th:href="@{'/order-list?pageNum=' + ${pageInfo.pageNum+1}}"
                                    th:text="${pageInfo.pageNum +1}">1</a></th:block>
                            <th:block th:if="${pageInfo.pageNum+2<=pageInfo.pages}"><a
                                    th:href="@{'/order-list?pageNum=' + ${pageInfo.pageNum+2}}"
                                    th:text="${pageInfo.pageNum +2}">1</a></th:block>
                            <a th:href="@{${pageInfo.pageNum>=pageInfo.pages}?'##':'/order-list?pageNum=' + ${pageInfo.pageNum+1}}">
                                                下一页 >
                                            </a>
                        </span>
                    </th:block>
                    </div>
                </div>
            </div>
            </div>
        </div>
</div>

<div th:replace="mall/general-footer::general-footer-fragment"></div>
</body>
<!--jQuery-->
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#order-list').addClass('active');
    });
</script>
</html>